.c1 {
    margin: 100px auto 0;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    outline: 1px solid blue;
    border: 1px solid red;
    position: relative;
}

@keyframes round {
    from {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

.b1 {
    width: 40px;
    height: 40px;
    background-color: orange;
    border-radius: 50%;
    /* transform: rotate(60deg); */
    transform-origin: 101px 101px;
    position: absolute;
    top: -21px;
    left: 81px;
    transform-origin: 20px 120px;
    animation: round 2.4s linear infinite;
    animation-play-state: paused;
}

.b1:nth-child(2) {
    /* transform: rotate(60deg); */
    animation-delay: -2s
}

.b1:nth-child(3) {
    /* transform: rotate(120deg); */
    animation-delay: -1.6s
}

.b1:nth-child(4) {
    /* transform: rotate(180deg); */
    animation-delay: -1.2s
}

.b1:nth-child(5) {
    /* transform: rotate(240deg); */
    animation-delay: -0.8s
}

.b1:nth-child(6) {
    /* transform: rotate(300deg); */
    animation-delay: -0.4s
}